<template>
	<view style="overflow: hidden;">
		<view class="pore" style="z-index: 9999;">
			<u-navbar title="美食" bgColor="transparent" @leftClick="leftBack" :titleStyle="{'color':'transparent'}">
				<view class="flex" slot="right" :style="{'marginRight':menuWidth + 'px'}">
					<view class="nav-left flex">
						<view class="wx">
							<button open-type="share">
								<!-- <u-icon name="share-square" size="24" color="#34314F"></u-icon> -->
								<image src="../static/images/share.png" style="width: 48rpx;height: 48rpx;"></image>
							</button>
						</view>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="uni-margin-wrap" v-if="detail.imgs.length > 0">
			<view class="pore">
				<swiper class="swiper" :current="banIndex" @change="changeSwiper" circular indicator-dots autoplay
					:interval="3000" indicator-active-color="#FFDE6D" :style="{ height: swiperHeight + 'px' }">
					<swiper-item v-for="(item,index) in detail.imgs" :key="index" class="flex-au"
						@click="$utils.previewImages(index,detail.imgs)">
						<image :src="api_host + item" mode="widthFix" class="width100"></image>
					</swiper-item>
				</swiper>
				<view class="ban-count cfff f26">
					{{banIndex + 1}} / {{detail.imgs.length}}
				</view>
			</view>
		</view>
		<view class="price_box flex-jus flex-start">
			<view>
				<span class="cfff f32">￥</span>
				<span class="price" v-if="detail.goodsSeckill">{{detail.goodsSeckill.price}}</span>
				<span class="price" v-else>{{detail.salePrice}}</span>
				<span class="oldprice ml10" v-if="detail.salePrice !== detail.originalPrice">￥{{detail.originalPrice}}</span>
				<span class="cfff f28 ml30">已售{{detail.saleVolume}}</span>
			</view>
			<view class="ms_djs" v-if="detail.goodsSeckill">
				<view class="f32 fw500 italic-text seckill-text">小石精选</view>
				<view class="count-down-wrap" style="margin-top: -8rpx;">
					<count-down :times="detail.goodsSeckill.downTimes"></count-down>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_title p30">
				<view class="c343 f36 fw500 borderbom">{{detail.goodName}}</view>
				<view class="overflow-hidden">
					<view class="flex mt20" style="flex-wrap: wrap;">
						<span class="f26 c999">服务</span>
						<span class="c343 f26 ml20" v-for="(item,index) in detail.employVal"
							:key="index">{{item}}</span>
						<image class="ml20" src="../static/images/icon1.png" mode="widthFix" style="width: 28rpx;"
							@click="nologinJump('/groupPurchase/detail/explain')">
						</image>
					</view>
					<view class="flex mt20">
						<span class="f26 c999">须知</span>
						<span class="c343 f26 ml20">{{detail.goodNotice}}</span>
					</view>
					<view class="flex mt20">
						<span class="f26 c999">期限</span>
						<span class="c343 f26 ml20">{{detail.goodTerm}}</span>
					</view>
					<view class="flex mt20">
						<span class="f26 c999">限制</span>
						<span class="c343 f26 ml20">{{detail.goodLimit}}</span>
					</view>
					<view class="flex mt20" v-if="detail.roomType === 1">
						<span class="f26 c999">预约</span>
						<span class="c343 f26 ml20">至少提前两小时预约</span>
					</view>
					<view class="flex mt20 date-list" v-if="detail.roomType === 1">
						<view class="scroll-wrap-box">
							<scroll-view :scroll-x="true" :scroll-left="scrollDistance" :scroll-with-animation="true">
								<view class="scroll-wrap">
									<view class="scroll-list">
										<view v-for="(date, index) in rommWeekDateList" 
											:key="date.roomDate" 
											:class="['date-item', { 'disabled': date.buyCount === 0, 'active': currentIndex === index }]" 
											@click="handleSelectDate(index)"
										>
											<span class="c343 f26 text">{{ date.weekDay }}</span>
											<view class="c343 f30 date text">{{ formatDateToMonth(date.roomDate) }}</view>
											<span class="c343 f26 text">{{ transformText(date.buyCount) }}</span>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="order-wrap" @click.stop="handleOrderDate">
							<view class="order-text">
								<span class="c343 f26 text">可约</span>
								<span class="c343 f26">日期</span>
							</view>
							<view class="allow-right"></view>
							<date-picker ref="datePicker"
								:show="showDateDialog" 
								:modal="true" 
								:singleDate="true" 
								:roomDateList="roomDateList" 
								@change="handleCheckinDate"
								@hideCalendar="() => showDateDialog = false"
							></date-picker> 
						</view>
					</view>
					<view class="flex-jus mt20" @click="showshop">
						<view>
							<span class="f26 c999">门店</span>
							<span class="c343 f26 ml20">{{detail.goodsStores.length}}家门店通用</span>
						</view>
						<image class="ml20" src="../static/images/icon2.png" mode="widthFix" style="width: 28rpx;">
						</image>
					</view>
				</view>
				<view class="areabox mt20 flex-jus">
					<view>
						<p class="f26 fw500">距你{{distance}}km</p>
						<!-- <p class="f26 fw500">
							<distance></distance>
						</p> -->
						<p class="f26 name textoverflow2">{{detail.oneStore.storeName}} {{detail.oneStore.storeAddr}}
						</p>
					</view>
					<view class="flex">
						<view class="radius50 bgFff p20 textC"
							@click="openAddress(detail.oneStore.longitude,detail.oneStore.latitude,detail.oneStore.storeName,detail.oneStore.storeAddr)">
							<view class="">
								<image src="../static/images/address.png" style="width:40rpx;height: 40rpx;">
								</image>
							</view>
							<view class="c343 f26">导航</view>
						</view>
						<view class="radius50 bgFff p20 textC ml30" @click="maketel(detail.oneStore.phone)">
							<view class="">
								<image src="../static/images/tel.png" mode="" style="width:40rpx;height: 40rpx;">
								</image>
							</view>
							<view class="c343 f26">电话</view>
						</view>
					</view>
				</view>
			</view>

			<view class="c343 f36 fw500">团购详情</view>
			<view class="tuangoudetail">
				<view class="mt10" v-for="(item,index) in detail.goodsGroups" :key="index">
					<p class="f28 fw500">{{item.title}}</p>
					<view class="flex-jus f26 mt20" v-for="(item2,index2) in item.goodsDetailList" :key="index2">
						<text>· {{item2.detailName}}</text>
						<view>
							<span class="c999" v-if="item2.detailUnit!='/'">({{item2.detailUnit}}份)</span>
							<span class="ml20" v-if="item2.detailPrice!='/'">￥{{item2.detailPrice}}</span>
						</view>
					</view>
					<p class="f28 fw500 mt10" v-if="item.detailImg!=null">图片详情</p>
					<image class="mt10" v-for="(item3,index3) in item.detailImg" :key="index3" :src="api_host + item3"
						style="border-radius: 32rpx;height: 400rpx;" mode="widthFix"></image>
				</view>
			</view>

			<view class="c343 f36 fw500">购买须知</view>
			<view class="goumaixvzhi">
				<view style="display: flex;" class="mt20" v-for="(item,index) in detail.buyNotices" :key="index">
					<image :src="api_host + item.icon" style="width:40rpx;height: 40rpx;"></image>
					<view class="ml20 flex1">
						<p class="f28 fw500">{{item.title}}</p>
						<p class="f26 mt20" v-for="(item2,index2) in item.contents" :key="index2">{{item2.content}}
						</p>
					</view>
				</view>
			</view>

			<view class="mb170">
				<u-gap height="20"></u-gap>
				<view class="c343 f36 fw500">
					团购评价（{{detail.observeNumber}}条）
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u-scroll-list :indicator="false">
						<view class="mr30 menu-item" v-for="(item,index) in pjTag" :key="index">
							<view class="pj-tag-item c999 f26 textoverflow" v-if="item.dictValue>0">
								{{item.dictLabel}} {{item.dictValue}}
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view>
					<u-scroll-list :indicator="false">
						<view class="mr30 menu-item comment-item" v-for="(item,index) in commentList" :key="index"
							@click="nologinJump('/subpage/housekeeping/commentDetail?id='+id+'&com_id='+item.id+ '&type=' + 3)">
							<view class="pj-item bgFff radius30 p20 flex-col flex-jus flex-start">
								<view class="comment-item">
									<view class="flex">
										<u-rate count="5" v-model="item.score" activeColor="#FFDE6D" readonly></u-rate>
										<text class="f24 c999 ml10">{{item.commentTime}}</text>
									</view>
									<view class="f26 c343 textoverflow2 mt20" v-if="item.content">
										{{item.content}}
									</view>
									<view class="pore flex mt20 mb20" v-if="item.imgsArr.length > 0">
										<view class="mr10" v-for="(item2,index2) in item.imgsArr.slice(0,3)"
											:key="index2">
											<u-image :src="api_host+item2" mode="aspectFill" width="26vw" height="100px"
												radius="5"></u-image>
										</view>
										<view class="add-count f26" v-if="item.imgsArr.length > 3">
											<text>共{{item.imgsArr.length}}张</text>
										</view>
									</view>
								</view>
								<view class="flex" v-if="item.user">
									<u-image :src="api_host + item.user.userAvatar" mode="" width="40px" height="40px"
										shape="circle"></u-image>
									<view class="ml10">
										<view class="c343 f28">{{item.user.userName}}</view>
										<!-- <view class="c999 f24">黄石港区</view> -->
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view v-if="detail.observeNumber>0">
					<u-button color="#fff" :customStyle="{'color':'#999','height':'80rpx'}" shape="circle"
						@click="openUrl('/subpage/housekeeping/commentList?id='+id+ '&type=' + 3)">查看全部{{detail.observeNumber}}条评价</u-button>
				</view>
			</view>
		</view>
		<view class="bottomfixed fix-bot" :class="showDateDialog ? 'custom' : ''">
			<view>
				<span class="cff7 f32">￥</span>
				<span class="cff7 f54 fw500">{{ totalPrice }}</span>
				<span class="oldprice ml10" v-if="detail.salePrice !== detail.originalPrice">￥{{detail.originalPrice}}</span>
			</view>
			<view class="flex">
				<view class="collect" :class="detail.isCollection == 1 ? 'active' : ''" @click="starlikeBtn(1,6,id)">
					<!-- <image v-if="detail.isLike==1" src="../static/images/star.png" style="width: 60rpx;height: 60rpx;">
					</image> -->
					<!-- <image src="../static/images/collect.png" style="width: 60rpx;height: 60rpx;"></image> -->
					<image :src="detail.isCollection==1?'../static/images/star.png':'../static/images/collect.png'"
						style="width: 58rpx;height: 58rpx;margin-left: 28rpx;"></image>
					<text class="collect-text">收藏</text>
				</view>
				<view class="buyBtn flex-cen ml20" @click="toSureorder">
					<text>立即购买</text>
				</view>
			</view>
		</view>

		<!-- 更多门店列表 -->
		<u-popup :show="show_shop" @close="closepopup" @open="show_shop = true" closeable round="20" bgColor="#FEF4E8">
			<view class="p30">
				<view class="f28 c343 bold">{{detail.goodsStores.length}}通用门店</view>
				<u-gap height="20"></u-gap>
				<view class="item_box mb20" v-for="(item,index) in detail.goodsStores" :key="index"
					@click="openUrl('/groupPurchase/detail/shopdetail?id='+item.id)">
					<view class="flex">
						<image src="../static/images/address2.png" style="width: 32rpx;height: 32rpx;"></image>
						<text class="f32 fw500 ml20">{{detail.brand}}</text>
					</view>
					<view class="f26 flex mt20">
						<!-- <image src="../static/images/star.png" style="width: 32rpx;height: 32rpx;"></image> -->
						<u-rate count="5" v-model="item.score" activeColor="#FFDE6D" readonly></u-rate>
						<text class="cff7 ml10">{{item.score}}</text>
						<text class="ml20">{{item.observeNumber}}条评价</text>
					</view>
					<view class="f26 mt20">
						<text>人均 ￥{{item.unitPrice}}</text>
						<text class="ml30">营业时间 {{item.businessHours}}</text>
					</view>
					<view class="areabox mt20 flex-jus">
						<view>
							<!-- <p class="f26 fw500">距你{{distance}}km</p> -->
							<p class="f26 name mt10 textoverflow2">{{item.storeName}} {{item.storeAddr}}</p>
						</view>
						<view class="flex">
							<view class="radius50 bgFff p20 textC"
								@click="openAddress(item.longitude,item.latitude,item.storeName,item.storeAddr)">
								<view class="">
									<image src="../static/images/address.png" style="width:40rpx;height: 40rpx;">
									</image>
								</view>
								<view class="c343 f26">导航</view>
							</view>
							<view class="radius50 bgFff p20 textC ml30" @click="maketel(item.phone)">
								<view class="">
									<image src="../static/images/tel.png" mode="" style="width:40rpx;height: 40rpx;">
									</image>
								</view>
								<view class="c343 f26">电话</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- //优惠券 -->
		<u-popup v-if="show_yhq" :show="show_yhq" @close="closeshowyhq" mode="center"
			:customStyle="{'width':'80%','position':'relative'}" @open="show_yhq = true" round="20"
			bgColor="transparent">
			<view class="p30 pore textC" style="z-index: 120;">
				<view class="c343 bold f40">{{coupon.name}}</view>
				<u-gap height="50"></u-gap>
				<view class="cfff f46" v-if="coupon.conpType == 1">
					满{{coupon.conpTextObject.fullAmount}}减{{coupon.conpTextObject.deductionAmount}}</view>
				<view class="cfff f46" v-if="coupon.conpType == 2">
					{{coupon.conpTextObject.discount/10}}折，最高减{{coupon.conpTextObject.maxReduction}}
				</view>
				<view class="cfff f46" v-if="coupon.conpType == 3">
					{{coupon.name}}
				</view>
				<u-gap height="50"></u-gap>
				<!-- <view class="cfff f32">全家政通用</view> -->
				<view class="cfff f26" v-if="coupon.lifespanType == 1">有效期: {{coupon.lifespanTextObject.startTime}} -
					{{coupon.lifespanTextObject.endTime}}
				</view>
				<view class="cfff f26" v-if="coupon.lifespanType == 2">有效期: {{coupon.lifespanTextObject.lifespan}}天
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}"
						shape="circle" @click="receiveCoupon">领取</u-button>
				</view>
				<u-gap height="30"></u-gap>
				<view class="flex-au" @click="closeshowyhq">
					<u-icon name="close-circle-fill" color="#000" size="26"></u-icon>
				</view>
			</view>
			<image src="../static/images/yhq_bg.png" mode="widthFix" class="yhq_bg"></image>
		</u-popup>
		<!-- //优惠券领取成功 -->
		<u-popup :show="show_yhq_success" @close="closeshowsuccess" mode="center"
			:customStyle="{'width':'30%','position':'relative'}" @open="show_yhq_success = true" round="20"
			bgColor="#333">
			<view class="p30 pore textC">
				<image src="../static/images/coin.png" mode="widthFix" style="width: 87px;"></image>
				<view class="cfff f24">领取成功</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getGoodsInfo,
		getGouponByid,
		getRoomDate
	} from '@/common/api_tuangou.js'
	import {
		getHomedetail,
		receiveCoupon
	} from '@/common/api_housekeeping.js'
	import {
		getNowFormatDate
	} from '@/common/utils.js'
	// import distance from '@/components/distance/index.vue'
	import countDown from '@/components/countDown/index.vue'
	import datePicker from '@/components/date-picker/date-picker.vue'
	export default {
		components: {
			countDown,
			datePicker
		},
		data() {
			return {
				banIndex: 0,
				swiperHeight: 300,
				longitude: 115.082256,
				latitude: 30.205922,
				detail: {
					imgs: [],
					goodsStores: []
				},
				show_shop: false,
				show_yhq: false,
				show_yhq_success: false,
				coupon: {},
				id: '',
				pjTag: [],
				commentList: [],
				addrLocation: {},
				distance: '',
				roomDateList: [],
				rommWeekDateList: [],
				currentIndex: -1,
				showDateDialog: false,
				totalPrice: 0,
				scrollDistance: 0
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		mounted() {
			this.getGoodsInfo()
			// this.getGouponByid()
			// this.getHomedetail()
			// this.distance = this.getMapDistance('115.082256', '30.205922', '115.05896', '30.25350');
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.goodName,
				path: '/groupPurchase/detail/index?id=' + this.detail.id,
				imageUrl: this.api_host + this.detail.icon,
				// desc: this.detail.brand,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getHomedetail() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await getHomedetail({
					id: this.id
				})
				if (res.code == 200) {
					// this.detail = res.data
					//this.detail.video = '/profile/upload/2024/07/09/764dc986f18c443f823968ddad7ff941_20240709135957A015.mp4'
					const {
						commentList,
						evaluateList,
						images,
						detailList,
						coupon
					} = res.data
					// this.pjTag = evaluateList;
					this.commentList = commentList.map(item => {
						return {
							...item,
							imgsArr: item.images ? item.images.split(',') : []
						}
					})
				}
				uni.hideLoading()
			},
			showshop() {
				this.show_shop = true
			},
			closepopup() {
				this.show_shop = false
			},
			closeshowyhq() {
				this.show_yhq = false
			},
			closeshowsuccess() {
				this.show_yhq_success = false
			},
			// 选择酒店日期
			handleSelectDate(index) {
				this.currentIndex = index
				this.totalPrice = this.rommWeekDateList[index].price || 0
				if (this.currentIndex > 2 || this.currentIndex < 7) {
					this.scrollDistance = (this.currentIndex - 1) * 62
				}
				
				console.log(this.currentIndex, 'curindex')
			},
			// 可预约日期
			handleOrderDate() {
				console.log(this.showDateDialog, 'this.showDateDialog')
				this.showDateDialog = true
				this.$refs.datePicker.showCalendar()
			},
			// 选择日历后回调
			handleCheckinDate(data) {
				this.showDateDialog = false
				this.$refs.datePicker.hideCalendar(true)
				const currentDate = data.choiceDate
				this.totalPrice = currentDate.act.price
				this.currentIndex = this.rommWeekDateList.findIndex(item => item.roomDate === currentDate.re);
				// scrollDistance
				
			},
			// 根据时间找出日期数据
			// function findItemByDate(items, date) {
			//   return items.findIndex(item => item.roomDate === date);
			// },
			// 获取酒店一周的日期数据
			async getRoomDateList() {
				const endDate = this.getNextWeekDay()
				const res = await getRoomDate({
					goodsId: this.id,
					endDate
				})
				if (res.code === 200) {
					this.rommWeekDateList = res.data || []
				}
				console.log(res, 'resssss')
			},
			// 获取酒店120天的日期数据
			async getRoomDate() {
				let endDate = this.getLastDayOfMonthAfterDays(150)
				const res = await getRoomDate({
					goodsId: this.id,
					endDate
				})
				if (res.code === 200) {
					this.roomDateList = res.data || []
					const tempData = JSON.stringify(res.data)
					uni.setStorage({
						key: 'roomDateList',
						data: tempData
					})
				}
				console.log(res, 'resssss')
			},
			// 获取某天后的那个月的最后一天日期
			getLastDayOfMonthAfterDays(days) {
			  const date = new Date(); // 当前日期
			  date.setDate(1); // 设置为当前月的第一天
			  date.setMonth(date.getMonth() + Math.ceil(days / 30)); // 增加月份
			  date.setDate(0); // 设置为当前月的最后一天
			  return this.formatDate(date); // 返回计算后的日期
			},
			formatDate(date) {
			  const yyyy = date.getFullYear();
			  const mm = this.padZero(date.getMonth() + 1);
			  const dd = this.padZero(date.getDate());
			  return `${yyyy}-${mm}-${dd}`;
			},
			padZero(value) {
			  return value < 10 ? `0${value}` : value;
			},
			// 获取酒店一周的数据
			getNextWeekDay() {
			    const now = new Date();
			    now.setDate(now.getDate() + 7); // 设置为7天后的日期
			    const year = now.getFullYear();
			    const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
			    const day = now.getDate().toString().padStart(2, '0');
			    return `${year}-${month}-${day}`; // 拼接并返回格式化的日期字符串
			},
			// 转换日期格式
			formatDateToMonth(dateString) {
			  const parts = dateString.split('-'); // 将日期分割为年、月、日
			  const year = parts[0]; // 提取年份
			  const month = parts[1]; // 提取月份
			  const day = parts[2]; // 提取日期
			  return `${month}/${day}`; // 返回 MM/DD 格式
			},
			// 转换文字
			transformText(count) {
				if (count === 0) {
					return '满房'
				} else if (count > 0 && count < 6) {
					return count + '间'
				} else {
					return '有房'
				}
			},
			async getGoodsInfo() {
				let res = await getGoodsInfo({
					id: this.id,
					longitude: this.longitude,
					latitude: this.latitude
				})
				this.detail = res.data
				const {
					goodImages,
					goodEmployValues,
					goodsStores,
					evaluateList,
					commentList,
					goodsGroups,
					goodsSeckill
				} = this.detail
				this.detail.imgs = goodImages.split(',')
				this.detail.employVal = goodEmployValues.split(',')
				this.detail.oneStore = goodsStores[0]
				this.addrLocation = goodsStores[0]
				this.pjTag = evaluateList;
				this.commentList = commentList.map(item => {
					return {
						...item,
						imgsArr: item.images ? item.images.split(',') : []
					}
				})
				goodsGroups.forEach(item => {
					if (item.detailImg) {
						item.detailImg = item.detailImg.split(',')
					}
				})
				if (goodsSeckill) {
					// let endTime = goodsSeckill.endDate + ' ' + goodsSeckill.endTime
					let endTime = getNowFormatDate() + ' ' + goodsSeckill.endTime
					let nowTimes = new Date().getTime()
					let endTimes = new Date(endTime).getTime()
					goodsSeckill.downTimes = endTimes - nowTimes
				}
				this.totalPrice = this.detail.goodsSeckill ? this.detail.goodsSeckill.price : this.detail.salePrice
				// 如果商品是酒店
				if (res.data.roomType === 1) {
					this.getRoomDateList()
					this.getRoomDate()
				}
				this.getSysinfo()
			},
			async getGouponByid() {
				let res = await getGouponByid({
					id: this.id
				})
				this.coupon = res.data || {};
				if (this.coupon.id) {
					this.show_yhq = true
				}
			},
			async receiveCoupon() {
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.coupon);
				// #endif
				uni.showLoading({
					mask: true
				})
				const res = await receiveCoupon({
					id: this.coupon.id
				})
				if (res.code == 200) {
					this.show_yhq = false
					this.show_yhq_success = true
					setTimeout(() => {
						this.show_yhq_success = false
					}, 1000)
				}
				uni.hideLoading()
			},
			openAddress(lon, lat, name, addr) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					name: name,
					address: addr
				})
			},
			// openAddress() {
			// 	let that = this
			// 	console.log(this.addrLocation.latitude);
			// 	uni.openLocation({
			// 		latitude: this.addrLocation.latitude,
			// 		longitude: this.addrLocation.longitude,
			// 		name: this.addrLocation.storeName,
			// 		address: this.addrLocation.storeAddr
			// 	})
			// },
			maketel(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getSysinfo() {
				let sysInfo = uni.getSystemInfoSync()
				this.swiperHeight = sysInfo.screenHeight * 0.6
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.banIndex = e.detail.current;
			},
			toSureorder() {
				if (!this.hasLogin) {
					this.toLogin()
					return false
				}
				let path = ''
				if (this.currentIndex >= 0) {
					const orderData = JSON.stringify(this.rommWeekDateList[this.currentIndex])
					path = `/groupPurchase/order/sureorder?id=${this.detail.id}&orderDate=${encodeURIComponent(orderData)}`
				} else {
					path = `/groupPurchase/order/sureorder?id=${this.detail.id}`
				}
				
				uni.navigateTo({
					url: path
				})
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				console.log('获取位置123');
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						console.log(res, 'res');
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.address = res.address;
						that.distance = that.getMapDistance(that.longitude, that.latitude, that.detail.oneStore
							.longitude,
							that.detail.oneStore.latitude)
						console.log("获取当前的用户经度", that.longitude);
						console.log("获取当前的用户纬度", that.latitude);
						var long = 0;
						var lat = 0;
						//小数点保留六位  经度
						if (that.longitude.toString().indexOf('.') > 0) {
							const longlatsplit = that.longitude.toString().split('.');
							if (longlatsplit.length >= 2) {
								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat(
									"." + longlatsplit[1].slice(0, 6));
							}
						}
						if (that.latitude.toString().indexOf('.') > 0) {
							const longlatsplit1 = that.latitude.toString().split('.');
							if (longlatsplit1.length >= 2) {
								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat(
									"." + longlatsplit1[1].slice(0, 6));
							}
						}
						// cookie.set("longitude", long);
						// cookie.set("latitude", lat);
						console.log("纬度", lat);
						// this.distance(that.latitude,that.longitude);
						// that.getList();
					},
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "你的位置将用于小程序展示与门店的距离",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									if (res[1].authSetting["scope.userLocation"] === true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "你拒绝了授权，无法为你提供定位服务",
					icon: "none",
					duration: 2000,
				});
			},
			onReady() {
				//   wx请求获取位置权限
				this.getAuthorize()
					.then(() => {
						//   同意后获取
						console.log('同意获取位置');
						this.getLocationInfo();
					})
					.catch(() => {
						//   不同意给出弹框，再次确认
						this.openConfirm()
							.then(() => {
								this.getLocationInfo();
							})
							.catch(() => {
								this.rejectGetLocation();
							});
					});
			},
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			//计算距离
			getMapDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s = s.toFixed(2);
				return s;
			},
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},

		}
	}
</script>

<style lang="scss">
	.nav-left {
		border-radius: 50%;
		padding: 10rpx;
		background-color: rgba(#fff, 0.8);
	}

	.yhq_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.seckill-text {
		padding-top: 8rpx;
		font-size: 36rpx;
		height: 42rpx;
		line-height: 42rpx;
	}
	.count-down-wrap {
		.time {
			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #34314F;
			}
			.time__custom  .time__custom__item {
				font-weight: 600;
				font-size: 24rpx !important;
				color: #34314F !important;
			}
		}
	}
	.date-list {
		position: relative;
		width: 100%;
		background: #F7F7F7;
		border-radius: 27rpx;
		padding: 20rpx 0 20rpx 30rpx;
		box-sizing: border-box;
		.scroll-wrap-box {
			width: calc(100% - 120rpx);
		}
		.scroll-wrap {
			.scroll-list {
				display: flex;
				.date-item {
					margin-right: 12rpx;
					text-align: center;
					padding: 10rpx 20rpx;
					    
					.date {
						font-weight: 600;
						font-size: 28rpx;
					}
					&.active {
						background: #f93f4a;
						border-radius: 9rpx;
						.text {
							color: #fff;
						}
						
					}
					&.disabled {
						background: #666;
						border-radius: 9rpx;
						pointer-events: none;
						.text {
							color: #999;
						}
						
					}
				}
			}
			
		}
		.order-wrap {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			width: 120rpx;
			height: 100%;
			background: #fff;
			z-index: 999;
			.order-text {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				span {
					display: block;
				}
				.text {
					margin-bottom: 10rpx;
				}
			}
			.allow-right {
				position: absolute;
				top: 50%;
				right: 0;
				display: block;
				width: 28rpx;
				height: 28rpx;
				background-image: url('../static/images/icon2.png');
				background-size: 100% 100%;
				transform: translateY(-50%);
			}
		}
	}

	.ban-count {
		position: absolute;
		right: 50rpx;
		bottom: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: rgba(#000, 0.5);
		padding: 0 20rpx;
		border-radius: 50rpx;
		z-index: 99;
	}

	.price_box {
		height: 169rpx;
		background: #FF7F1C;
		border-radius: 58rpx 58rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.price {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 54rpx;
			color: #FFFFFF;
			line-height: 77rpx;
			text-align: left;
			font-style: normal;
		}

		.oldprice {
			width: 65rpx;
			height: 31rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #ddd;
			line-height: 31rpx;
			text-align: left;
			font-style: normal;
			text-decoration: line-through
		}
	}

	.content {
		min-height: 300rpx;
		border-radius: 58rpx 58rpx 0rpx 0rpx;
		position: relative;
		bottom: 40rpx;
		z-index: 100;
		background-color: #FEF4E8;
		overflow: hidden;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;

		.content_title {
			width: 688rpx;
			// height: 648rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			margin: 40rpx auto;
			box-sizing: border-box;

			.borderbom {
				border-bottom: 1px solid #ddd;
				padding-bottom: 20rpx;
			}

			.areabox {
				width: 627rpx;
				height: 150rpx;
				background: #F7F7F7;
				border-radius: 27rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.name {
					width: 310rpx;
					line-height: 35rpx;
				}
			}
		}

		.tuangoudetail {
			width: 688rpx;
			min-height: 300rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			margin: 40rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

		}

		.goumaixvzhi {
			width: 688rpx;
			min-height: 300rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			margin: 40rpx auto;
			padding: 10rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.comment-item {
			width: 650rpx;
		}

		.menu-item {
			margin: 5rpx 10rpx 5rpx 5rpx;
			border: 1px solid transparent;

			.menu-item-box {
				width: 280rpx;
			}
		}

		.pj-tag-item {
			text-align: center;
			border: 1px solid #999;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
		}

		.add-count {
			position: absolute;
			right: 10rpx;
			top: 0;
			height: 100%;
			display: flex;
			align-items: center;
			width: 200rpx;
			justify-content: center;

			text {
				background-color: rgba(#000, 0.5);
				border-radius: 50rpx;
				color: #fff;
				padding: 10rpx 30rpx;
			}
		}
	}

	.bottomfixed {
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 100 !important;
		&.custom {
			z-index: 10 !important;
		}
	}

	.collect {
		display: flex;
		align-items: center;
		width: 190rpx;
		height: 94rpx;
		border-radius: 40rpx;
		border: 2rpx solid rgba(52, 49, 79, 0.13);
		box-sizing: border-box;
		// opacity: 0.13;
		.collect-text {
			font-weight: 500;
			font-size: 28rpx;
			color: #34314F;
		}
		&.active {
			background-color: #34314F;
			.collect-text {
				color: #FFDE6D;
			}
		}
	}

	.activecl {
		background: #FFDE6D;
		opacity: 1;
		border: none;
	}

	.buyBtn {
		width: 227rpx;
		height: 94rpx;
		background: #FFDE6D;
		border-radius: 38rpx;
		backdrop-filter: blur(25px);
		text {
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
		}
	}

	.oldprice {
		width: 65rpx;
		height: 31rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #ddd;
		line-height: 31rpx;
		text-align: left;
		font-style: normal;
		text-decoration: line-through
	}

	.item_box {
		width: 688rpx;
		height: 377rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.areabox {
		width: 627rpx;
		height: 150rpx;
		background: #F7F7F7;
		border-radius: 27rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.name {
			width: 310rpx;
			line-height: 35rpx;
		}
	}

	.ms_djs {
		width: 227rpx;
		height: 85rpx;
		background-color: #FFDE6D;
		border-radius: 35rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
	}
</style>